<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Base HTML Page</title>

<link rel="stylesheet" href="Styles/style.css" type="text/css">
<script type="text/javascript" src="Libs/jquery.js"></script>

<script type="text/javascript">
	function openSubMenu()
	{
		$(this).find('.header_menu').css('visibility', 'visible');
	}
	
	function closeSubMenu()
	{
		$(this).find('.header_menu').css('visibility', 'hidden');
	}
	
	$(document).ready(function () {
		$('.header_item').bind('mouseover', openSubMenu);
		$('.header_item').bind('mouseout',  closeSubMenu);
		
		if($("#columnTwo1").height() > $("#columnOne1").height())
		{
			$("#columnOne1").height($("#columnTwo1").height());
		}
		else
		{
			$("#columnTwo1").height($("#columnOne1").height());
		}
		
		if($("#columnTwo2").height() > $("#columnOne2").height())
		{
			$("#columnOne2").height($("#columnTwo2").height());
		}
		else
		{
			$("#columnTwo2").height($("#columnOne2").height());
		}
	});
</script>
</head>
<body>

<div id="pageHeader">
	<div class="logoHeader"> 
		<img alt="" src="Resources/logoAsteroid2.png" style="float: right;">
	</div>

	<div class="emptyWhiteSpace" style="padding-top: 40px;"> </div>
	
	<div class="greyLine"> </div>
	
	<div class="header">
		<div class="header_item"> 
			<a id="Lorem" href="#">
				Lorem
			</a>
			<div class="header_menu">
				<ul>
					<li>
						<a id="Lorem" href="#"> Link </a>
					</li>
					<li>
						Consectetur
					</li>
					<li>
						Adipiscing
					</li>
				</ul>
			</div>
		</div>
		<div class="header_item"> 
			<a id="ipsum" href="#">
				Ipsum
			</a>
			<div class="header_menu">
				<ul>
					<li>
						<a id="Lorem" href="#"> Link </a>
					</li>
					<li>
						Consectetur
					</li>
					<li>
						Adipiscing
					</li>
				</ul>
			</div>
		</div>
		<div class="header_item"> 
			<a id="Dolor" href="#">
				Dolor
			</a>
			<div class="header_menu">
				<ul>
					<li>
						<a id="Lorem" href="#"> Link </a>
					</li>
					<li>
						Consectetur
					</li>
					<li>
						Adipiscing
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="hardGreyLine">
</div>

<div class="error">
	<b>Erro nas classes de negócio!</b>
</div>
<div class="feedback">
	<b>Feedback nas classes de negócio!</b>
</div>

<div class="pageBody">
	Texto em uma só coluna, class = pageBody.<br/>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus, mi nec porttitor vestibulum, justo risus facilisis ipsum, ac semper nisi lectus vitae elit. Sed venenatis blandit sapien at fermentum. Proin at orci eu nibh cursus mollis. Suspendisse bibendum suscipit luctus. Cras consectetur vestibulum magna, eu molestie nisi posuere non. Vestibulum tristique orci sit amet libero hendrerit id consectetur tellus tristique. Nulla dui nisi, pulvinar sed semper non, mollis vel magna. Nam ornare, velit porttitor semper congue, mi est sollicitudin elit, eu blandit nibh dolor quis dui. Sed magna augue, auctor euismod lobortis ac, feugiat et nisi. Mauris mollis adipiscing quam, vel ultrices turpis laoreet ac. 
</div>

<div class="pageBody">
	<div id="columnOne1" class="pageBodyLeft">
		Texto em duas colunas, class da coluna da esquerda = pageBodyLeft<br/>
		<h4>Colunas duplas precisam de código javascript para ficarem do mesmo tamanho</h4>
		<h3>Código na coluna ao lado: </h3>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus, mi nec porttitor vestibulum, justo risus facilisis ipsum, ac semper nisi lectus vitae elit. Sed venenatis blandit sapien at fermentum. Proin at orci eu nibh cursus mollis. Suspendisse bibendum suscipit luctus. Cras consectetur vestibulum magna, eu molestie nisi posuere non. Vestibulum tristique orci sit amet libero hendrerit id consectetur tellus tristique. Nulla dui nisi, pulvinar sed semper non, mollis vel magna. Nam ornare, velit porttitor semper congue, mi est sollicitudin elit, eu blandit nibh dolor quis dui. Sed magna augue, auctor euismod lobortis ac, feugiat et nisi. Mauris mollis adipiscing quam, vel ultrices turpis laoreet ac.
	</div>
	<div id="columnTwo1" class="pageBodyRight">
		Texto em duas colunas, class da coluna da direita = pageBodyRight<br/>
		<h4>Colunas duplas precisam de código javascript para ficarem do mesmo tamanho</h4>
		<h3>Exemplo do código: </h3>
		<code>
			if($("#columnTwo").height() > $("#columnOne").height()) <br/>
			{<br/>
			&nbsp;&nbsp;&nbsp;&nbsp;$("#columnOne").height($("#columnTwo").height());<br/>
			}<br/>
			else<br/>
			{<br/>
			&nbsp;&nbsp;&nbsp;&nbsp;$("#columnTwo").height($("#columnOne").height());<br/>
			}<br/>
		</code>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus, mi nec porttitor vestibulum, justo risus facilisis ipsum, ac semper nisi lectus vitae elit. Sed venenatis blandit sapien at fermentum. Proin at orci eu nibh cursus mollis. Suspendisse bibendum suscipit luctus. Cras consectetur vestibulum magna, eu molestie nisi posuere non. Vestibulum tristique orci sit amet libero hendrerit id consectetur tellus tristique. Nulla dui nisi, pulvinar sed semper non, mollis vel magna. Nam ornare, velit porttitor semper congue, mi est sollicitudin elit, eu blandit nibh dolor quis dui. Sed magna augue, auctor euismod lobortis ac, feugiat et nisi. Mauris mollis adipiscing quam, vel ultrices turpis laoreet ac.
	</div>
</div>

<div class="pageBody">
	<div id="columnOne2" class="pageBodyLeft">
		Exemplo de imagem: <br/>
		<img alt="asterisk" src="Resources/asterisk.png">
	</div>
	<div id="columnTwo2" class="pageBodyRight">
		Exemplo de Formulário:
		
		<form action="#">
			<table cellspacing="0">
				<tr> 
					<td class="left">
						Campo 1
					</td>
					<td class="right">
						<input type="text">
					</td>
				</tr>
				<tr> 
					<td class="left">
						Campo 2
					</td>
					<td class="right">
						<input type="password">
					</td>
				</tr>
				<tr> 
					<td class="left">
						Campo 3
					</td>
					<td class="right">
						<input type="radio"> Valor 1
						<input type="radio"> Valor 2
					</td>
				</tr>
				<tr> 
					<td class="left">
						Campo 4
					</td>
					<td class="right">
						<input type="checkbox"> Valor 1
						<input type="checkbox"> Valor 2
					</td>
				</tr>
				<tr class="hidden_tr"> 
					<td class="left">
						Campo 4
					</td>
					<td class="right">
						<input type="checkbox"> Valor 1
						<input type="checkbox"> Valor 2
					</td>
				</tr>
				<tr> 
					<td class="buttons" colspan="2">
						<input type="button" value="Submit">
					</td>
				</tr>
			</table>	
		</form>
	</div>
</div>

<div class="pageBody">
	<div class="pageTable">
		<table align="center" class="result" cellspacing="0" style="width: auto;">
			<tr>
				<td class="title" colspan="4">Exemplo de Tabela</td>
			</tr>
			<tr>
				<td class="subtitle" colspan="4">Subtítulo da tabela</td>
			</tr>
			<tr>
				<td class="header">Lorem</td>
				<td class="header">Ipsum</td>
				<td class="header">Dolor</td>
				<td class="header" style="border: none;">Sit</td>
			</tr>
			<tr>
				<td class="result">Lorem</td>
				<td class="result">Ipsum</td>
				<td class="result">Dolor</td>
				<td class="result" style="border: none;">Sit</td>
			</tr>
			<tr>
				<td class="result">Lorem</td>
				<td class="result">Ipsum</td>
				<td class="result">Dolor</td>
				<td class="result" style="border: none;">Sit</td>
			</tr>
			<tr>
				<td class="result">Lorem</td>
				<td class="result">Ipsum</td>
				<td class="result">Dolor</td>
				<td class="result" style="border: none;">
					<a href="#">Link</a>
				</td>
			</tr>
		</table>
	</div>
</div>

<div class="footer">
	<div class="footer_copyright">
		© 2012 Yvens Rebouças, Daniel Santiago. All Rights Reserved.
	</div>
</div>

</body>
</html>
